<template>
  <a-row :gutter="16" style="margin-bottom: 16px">
    <a-col class="gutter-row" :span="3" v-if="idx === 0">
      <div class="gutter-box cp" style="height: 100%; display: flex; align-items: center">当</div>
    </a-col>
    <a-col class="gutter-row" :span="3" v-else>
      <a-select style="width: 100%" ref="select" v-model:value="state.first" placeholder="请选择">
        <a-select-option value="1">且</a-select-option>
        <a-select-option value="2">或</a-select-option>
      </a-select>
    </a-col>
    <a-col class="gutter-row" :span="5">
      <a-select ref="select" v-model:value="state.value1" style="width: 100%" placeholder="请选择" @change="changeType">
        <a-select-option v-for="item in typeOptions" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </a-col>
    <a-col class="gutter-row" :span="4">
      <a-select ref="select" v-model:value="state.value2" style="width: 100%" placeholder="请选择">
        <a-select-option v-for="item in equalOptions" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </a-col>
    <a-col class="gutter-row" :span="10">
      <div class="gutter-box">
        <div v-if="state.controlType === 'input'">
          <a-input style="width: 100%" :placeholder="`请输入${state.placeholder}`" />
        </div>
        <div v-if="state.controlType === 'select'">
          <Select :options="state.options" :placeholder="`请选择${state.placeholder}`" />
        </div>
        <div v-if="state.controlType === 'selectAsync'">
          <SelectAsync :request-options="useGetCountryOptions" :placeholder="`请选择${state.placeholder}`" label="name" value="code" />
        </div>
        <div v-if="state.controlType === 'date'">
          <a-range-picker style="width: 100%" />
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="2">
      <div class="gutter-box cp" style="height: 100%; display: flex; align-items: center">
        <DeleteOutlined @click="handlerDel" />
      </div>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
  import { ref, Ref, reactive } from "vue"
  import Select from "@/components/select/index.vue"
  import SelectAsync from "@/components/selectAsync/index.vue"
  import { useSelectAsync } from "@/hook/index"
  import { DeleteOutlined } from "@ant-design/icons-vue"

  const props = defineProps({
    idx: {
      type: Number,
      default: 0,
    },
  })

  const emit = defineEmits(["handlerDel"])

  const handlerDel = () => {
    emit("handlerDel", props.idx)
  }

  /**
   * 字典逻辑
   */
  import { useEnum } from "@/enum/index"
  /**
   * select异步请求数据
   */
  const { useGetCountryOptions } = useSelectAsync()
  // 解构
  const { getEnumList } = useEnum()
  // 合作阶段
  const cooperationStageOption = getEnumList("cooperationStageModule")
  // 支持讲座
  const supportingLecturesOption = getEnumList("supportingLecturesModule")

  const state = reactive({
    fields: [1, 2, 3],
    first: undefined,
    value1: undefined,
    value2: undefined,
    controlType: "",
    placeholder: "",
    options: [],
  })

  const changeType = (value: string) => {
    const type = typeOptions.filter((item) => item.value === value)
    state.controlType = type[0].type
    state.placeholder = type[0].label
    state.options = type[0]?.options || []
  }

  const typeOptions: Recordable[] = [
    {
      label: "助教姓名/编号",
      value: "value1",
      type: "input",
    },
    {
      label: "就读院校",
      value: "value2",
      type: "select",
    },
    {
      label: "就读专业",
      value: "value3",
      type: "select",
    },
    {
      label: "助教管理专员",
      value: "value4",
      type: "select",
    },
    {
      label: "国籍",
      value: "value5",
      type: "selectAsync",
    },
    {
      label: "联系电话/邮箱",
      value: "value6",
      type: "input",
    },
    {
      label: "支持讲座",
      value: "value7",
      type: "select",
      options: supportingLecturesOption,
    },
    {
      label: "合作阶段",
      value: "value8",
      type: "select",
      options: cooperationStageOption,
    },
    {
      label: "开通教师端帐号",
      value: "value9",
      type: "select",
    },
    {
      label: "日期范围",
      value: "value10",
      type: "date",
    },
  ]
  const equalOptions = [
    {
      label: "属于",
      value: "belong",
    },
    {
      label: "不属于",
      value: "unbelong",
    },
    {
      label: "为空",
      value: "equal",
    },
    {
      label: "非空",
      value: "unequal",
    },
    {
      label: "包含",
      value: "includs",
    },
  ]
</script>
